@import "../common/rem";
@import "../common/flex-class";
@import "../common/mixins";
@import "../less/util";

#journals {

    .del {
        position: absolute;
        .px2rem(top, 6);
        .px2rem(right, 2);
        .px2rem(width, 38);
        .px2rem(height, 38);
        .px2rem(background-size, 38);
        background: url('../images/del.png') no-repeat;
    }
    .label {
        .px2px(font-size, 26);
        .px2rem(height, 64);
        .px2rem(line-height, 64);
        color: #969696;
        background: #f0f4f6;
    }
    .icon-right:before {
        position: absolute;
        .px2rem(right, 32);
        color: #AAAAAA;
    }
    .datepicker, .location, .whocansee {
        background: #fff;
        position: relative;
        .px2rem(height, 102);
        .px2rem(line-height, 102);
        .px2px(font-size, 30);
    }
    .location {
        &::after {
            content: '';
            position: absolute;
            bottom: 0;
            .px2rem(left, 85);
            width: 100%;
            height: 1px;
            //.scale(1, .5);
            background: #ddd;
        }
    }
    .selected {
        .px2px(font-size, 28);
        .px2rem(width, 411);
        width: 55%;
        text-align: right;
        color: #969696;
        position: absolute;
        .px2rem(right, 70);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

    }
    .location {
        .hairline(bottom, #ddd, 12);
        //&:after {
        //  content: '';
        //  position: absolute;
        //  .px2rem(left,82);
        //  bottom: 0;
        //  right: auto;
        //  top: auto;
        //  height: 1px;
        //  width: 100%;
        //  background-color: #ddd;
        //  display: block;
        //  z-index: 15;
        //  transform-origin: 50% 100%;
        //  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        //    transform: scaleY(0.5);
        //  }
        //  @media only screen and (-webkit-min-device-pixel-ratio: 3) {
        //    transform: scaleY(0.33);
        //  }
        //}
    }
    .icon--11 {
        .px2px(font-size, 38);
        .px2rem(padding-right, 15);
        color: #73D51C;
        top: 4px;
        position: relative;
    }
    .icon--12 {
        .px2px(font-size, 38);
        .px2rem(padding-right, 15);
        color: #8991FF;
        top: 4px;
        position: relative;
    }

    .input-multi-text {
        background: #FFF;
        .px2rem(height, 200);
        textarea {
            border: none;
            width: 100%;
            height: 100%;
            .px2rem(padding-top, 32);
            .px2rem(padding-bottom, 32);
            .px2px(font-size, 30);
            font-weight: 300;
            &::-webkit-input-placeholder {
                .px2rem(font-size, 30);
            }
        }
    }
    .input-text, .input-text-number {
        background: #fff;
        .px2rem(height, 100);
        input {
            border: none;
            height: 100%;
            width: 100%;
            display: block;
            padding: 0;
            .px2px(font-size, 30);
            font-weight: 300;
            &::-webkit-input-placeholder {
                .px2px(font-size, 30);
            }
        }

    }

    .input-radio {
        .px2rem(height, 100);
        background: #FFF;
        .flex();
        div {
            &:first-child {
                padding-left: 0;
            }
            position: relative;
            .px2rem(line-height, 100);
            .px2px(font-size, 38);
            font-weight: normal;
        }
        span {
            display: block;
            .px2rem(padding-left, 50);
            .px2rem(height, 100);
            .px2rem(line-height, 100);
            .px2px(font-size, 30);
        }
        //.unchecked{
        //  &:before{
        //    content: "";
        //    border: 1px solid #ddd;
        //    border-radius: 100px;
        //    .px2rem(width,32);
        //    .px2rem(height,32);
        //    .px2rem(padding-left,37);
        //  }
        //}
        .icon--20 {
            &:before {
                position: absolute;
                color: #CCCCCC;
                .px2rem(padding-right, 10);
            }
        }
        .icon--10 {
            &:before {
                position: absolute;
                color: #F76A75;
                .px2rem(padding-right, 10);
            }
        }
    }
    .images {
        //.px2rem(height,160);
        font-size: 0;
        background: #f0f4f6;
        .image {
            position: relative;
            //.flex-box-1();
            //text-align: center;
            display: inline-block;
            vertical-align: middle;
            .px2rem(margin-right, 20);
            .px2rem(margin-bottom, 15);
            .px2rem(height, 140);
            overflow: hidden;
            border-radius: 10px;
            img {
                .px2rem(width, 140);
            }
            padding: 0px;
        }
        .add {
            //margin: 0 auto;
            position: relative;
            .flex();
            .flex-main-center();
            .flex-cross-center();
            background: #FFF;
            .px2rem(border-width, 10);
            padding: 0px;
            .px2rem(border-width, 2);
            border-style: dashed;
            border-color: #B8D1E3;
            .px2rem(height, 140);
            .px2rem(width, 140);
            .inner {
                padding: 0px;
                .px2rem(width, 36);
                .px2rem(height, 36);
                position: relative;
            }

            .main {
                padding: 0;
                width: 100%;
                .px2rem(height, 5);
                background: #B8D1E3;
                position: absolute;
                top: 50%;
                left: 50%;
                -ms-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }
            .cross {
                padding: 0;
                .px2rem(width, 5);
                height: 100%;
                position: absolute;
                left: 50%;
                background: #B8D1E3;
                top: 50%;
                -ms-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }
        }
    }
    .wrapper {
        background: #f0f4f6;
        .px2rem(padding-top, 40);
        .px2rem(padding-bottom, 40);

    }
    .main {
        width: 100%;
        position: absolute;
        .px2rem(top, 88);
        left: 0;
        right: 0;
        bottom: 0;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    .content {
        .flex-box-1();
        div {
            .px2rem(padding-left, 32);
            .px2rem(padding-right, 32);
        }
        .form-container {
            padding: 0;
        }
    }

    .sub-button {
        .px2px(font-size, 32);
        margin: 0 auto;
        width: 95%;
        .px2rem(height, 90);
        .px2rem(line-height, 90);
        background: #F76A75;
        color: white;
        border-radius: 10px;
        .px2px(font-size, 30);
        text-align: center;
    }

    .multi-select {
        background: #fff;
        .px2rem(padding-top, 20);
        .px2rem(padding-bottom, 20);
        .multi-select-type {
            padding: 0;
            .px2rem(font-size, 24);
            span {
                .px2rem(padding-top, 10);
                .px2rem(padding-bottom, 10);
                .px2rem(padding-left, 12);
                .px2rem(padding-right, 12);
                .px2rem(margin-right, 14);
                background-color: #F4F6F7;
                color: #969696;
                border-radius: 8px;
                white-space: nowrap;
                line-height: 3;
            }
            span.kw-selected {
                background-color: #F76A75;
                color: #ffffff;
            }
        }
    }
}
